<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Taco Cloud</title>
    <link rel="stylesheet" th:href="@{/styles.css}"/>
</head>

<body>

<form method="POST" th:action="@{/orders}" th:object="${order}">
    <h1>Order your taco creations!</h1>

    <img th:src="@{/images/TacoCloud.png}"/>

    <h3>Your tacos in this order:</h3>
    <a id="another" th:href="@{/design}">Design another taco</a><br/>
    <ul>
        <li th:each="taco : ${order.tacos}"><span th:text="${taco.name}">taco name</span></li>
    </ul>

    <div th:if="${#fields.hasErrors()}">
        <span class="validationError">
        Please correct the problems below and resubmit.
        </span>
    </div>

    <h3>Deliver my taco masterpieces to...</h3>
    <label for="deliveryName">Name: </label>
    <input th:field="*{deliveryName}" type="text"/>
    <span class="validationError"
          th:errors="*{deliveryName}"
          th:if="${#fields.hasErrors('deliveryName')}">Name Error</span>
    <br/>

    <label for="deliveryStreet">Street address: </label>
    <input th:field="*{deliveryStreet}" type="text"/>
    <span class="validationError"
          th:errors="*{deliveryStreet}"
          th:if="${#fields.hasErrors('deliveryStreet')}">Street Error</span>
    <br/>

    <label for="deliveryCity">City: </label>
    <input th:field="*{deliveryCity}" type="text"/>
    <span class="validationError"
          th:errors="*{deliveryCity}"
          th:if="${#fields.hasErrors('deliveryCity')}">City Error</span>
    <br/>

    <label for="deliveryState">State: </label>
    <input th:field="*{deliveryState}" type="text"/>
    <span class="validationError"
          th:errors="*{deliveryState}"
          th:if="${#fields.hasErrors('deliveryState')}">State Error</span>
    <br/>

    <label for="deliveryZip">Zip code: </label>
    <input th:field="*{deliveryZip}" type="text"/>
    <span class="validationError"
          th:errors="*{deliveryZip}"
          th:if="${#fields.hasErrors('deliveryZip')}">Zip Error</span>
    <br/>

    <h3>Here's how I'll pay...</h3>
    <label for="ccNumber">Credit Card #: </label>
    <input th:field="*{ccNumber}" type="text"/>
    <span class="validationError"
          th:errors="*{ccNumber}"
          th:if="${#fields.hasErrors('ccNumber')}">CC Num Error</span>
    <br/>

    <label for="ccExpiration">Expiration: </label>
    <input th:field="*{ccExpiration}" type="text"/>
    <span class="validationError"
          th:errors="*{ccExpiration}"
          th:if="${#fields.hasErrors('ccExpiration')}">CC Num Error</span>
    <br/>

    <label for="ccCVV">CVV: </label>
    <input th:field="*{ccCVV}" type="text"/>
    <span class="validationError"
          th:errors="*{ccCVV}"
          th:if="${#fields.hasErrors('ccCVV')}">CC Num Error</span>
    <br/>

    <input type="submit" value="Submit order"/>
</form>

</body>
</html>
